<template>
  <div class="my-qas-wrapper">
    <ul class="tags-tab">
      <li @click="switchActive(0)" :class="['tag-item', 'tag-align-center', activeIndex == 0 ? 'tag-selected' : '']">我的提问</li>
      <li @click="switchActive(1)" :class="['tag-item', 'tag-align-center', activeIndex == 1 ? 'tag-selected' : '']">我的回答</li>
      <li v-if="userInfo.user_type==2" @click="switchActive(2)" :class="['tag-item', 'tag-align-center', activeIndex == 2 ? 'tag-selected' : '']">我的邀约</li>
    </ul>

    <van-pull-refresh v-model="isRefreshing">
    <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="400" v-if="activeIndex == 0" class="question-wrapper">
      <li v-for="(item, index) in dataList[activeIndex].results" @click="viewQuestionDetail(index)" class="question-info-item">
        <div class="question-header">
          <img class="avatar" :src="item.asker.avatar" alt="" />
          <span class="name">{{ item.asker.nickname }}</span>
          <span class="price">￥{{ item.reward }}</span>
        </div>
        <div class="question-content">
          <div :class="[ 'question-desc', item.attachments.length ? 'dianping-type' : '']">
            <p class="question-text">{{ item.text }}</p>
            <div class="question-tags">
              <span v-if="item.catalog" class="tag-item">{{ item.catalog.name }}</span>
            </div>
          </div>
          <div v-if="item.attachments.length" class="question-painting">
            <img :src="item.attachments[0]" alt="">
          </div>
        </div>
      </li>
    </ul>
    <blank-content v-if="!dataList[activeIndex].results.length" text="暂无内容"></blank-content>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import { mapGetters } from 'vuex'

import Waterfall from '@/components/vant/waterfall'
import BlankContent from '@/components/blankContent'

Vue.component(BlankContent.name, BlankContent)

export default {
  name: 'MyDianpings',
  data () {
    return {
      activeIndex: 0,
      isRefreshing: false,
      disabled: true,
      dataList: [{ results: [] }, { results: [] }, { results: [] }]
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    isRefreshing() {
      if (this.isRefreshing) {
        this.refreshData()
      }
    }
  },
  created () {
    this.getData()
  },
  directives: {
    WaterfallLower: Waterfall('lower')
  },
  methods: {
    switchActive(index) {
      this.activeIndex = index
      var data = this.dataList[index]
      if (!data.results.length) {
        this.getData()
      }
    },
    viewQuestionDetail(index) {
      var name = 'questionDetail'
      if (this.activeIndex == 0) {
        name = 'myQuestionDetail'
      }
      var question = this.dataList[this.activeIndex].results[index]
      this.$router.push({ name: name, params: { question: question, id: question.id }})
    },
    refreshData() {
      var that = this
      this.dataList[this.activeIndex] = { results: [] }
      this.getData(null, function() {
        that.isRefreshing = false
      })
    },
    /*
     * 加载更多
     */
    loadMoreData() {
      var data = this.dataList[this.activeIndex]
      if (data.next) {
        this.getData(data.next)
      }
    },
    getData(next=null, callback=null) {
      var params = {}
      var url = '/dianping/question/'
      if (next) {
        url = next
      } else {
        if (this.activeIndex == 0) {
          params = {
            'asker': this.userInfo.id,
          }
        } else if (this.activeIndex == 1) {
          params = {
            'answers__replier': this.userInfo.id
          }
        } else if (this.activeIndex == 2) {
          params = {
            'replier': this.userInfo.id
          }
        }
      }
      this.$toast.loading()
      var data = this.dataList[this.activeIndex]
      var that = this
      // 调用登陆接口
      this.axios.get(url, { params: params })
      .then(function (res) {
        that.$toast.clear()
        console.log(res.data)
        if (res.status === 200) {
          data.count = res.data.count
          data.next = res.data.next
          data.previous = res.data.previous
          data.results = data.results.concat(res.data.results)
        }
        if (callback) {
          return callback()
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
  }
}

</script>
